<template>
  <div class="collect">
    <div class="collect-header">
      <div class="collect-title">
        <p>
          <i class="el-icon-collection-tag" style="color: #ff6700;"></i>
          我的资源
        </p>
        <span>温馨提示：所有曾发布的资源都在这里哦！！！</span>
        <div class="r_upload">
          <el-button type="text" @click="upload = true">发布新资源</el-button>
        </div>
      </div>
    </div>
    <div class="content" v-if="collectList.length>0">
      <ul>
        <!-- 资源表头 -->
        <li class="header">
          <div class="pro-kind">Title</div>
          <div class="pro-img"></div>
          <div class="pro-name">资源名称</div>
          <div class="pro-price">单价</div>
          <div class="pro-num">数量</div>
          <div class="pro-approval">审批订单</div>
          <div class="pro-action">操作</div> <!--删除资源记录-->
        </li>
        <!-- 资源头END -->

        <!-- 资源列表 -->
        <li class="product-list" v-for="(item) in collectList" :key="item.id">
          <div class="pro-kind">{{item.product_title}}</div>
          <div class="pro-img">
            <router-link :to="{ path: '/goods/details', query: {productID:item.productID} }">
              <img :src="$target + item.product_picture" />
            </router-link>
          </div>
          <div class="pro-name">
            {{item.product_name}}
          </div>
          <div class="pro-price">{{item.product_price}}元</div>
          <div class="pro-num">
            <router-link
                    :to="{ path: '/goods/details', query: {productID:item.productID} }"
            >{{item.product_num}}</router-link>
          </div>
          <div class="pro-approval" >
            <el-form ref="form" v-if="approval" v-model="ifAgree">
              <el-select  v-model="ifAgree.result" placeholder="是否接受" >
                <el-option label="同意" value="1" @click.native="submitResults($event,item.id,1,item.product_id)"></el-option>
                <el-option label="拒绝" value="2" @click.native="submitResults($event,item.id,2,item.product_id)"></el-option>
              </el-select>
            </el-form>
            <span v-else>未售出</span>
          </div>
          <div class="pro-action">
            <el-popover placement="right">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 10px 0 0">
                <el-button
                        type="primary"
                        size="mini"
                        @click="deleteItem($event,item.id,item.product_id)"
                >确定</el-button>
              </div>
              <i class="el-icon-error" slot="reference" style="font-size: 18px;"></i>
            </el-popover>
          </div>
        </li>
        <!-- 购物车列表END -->
      </ul>
    </div>
    <!-- 我的资源为空的时候显示的内容 -->
    <div v-else class="collect-empty">
      <div class="empty">
        <h2>您还未上传过任何资源！</h2>
        <p>快去发布新资源吧！</p>
      </div>
    </div>
    <!--  资源列表为空的时候显示的内容END -->
    <MyUpload :upload="upload" @fromChild="isUpload"></MyUpload>

  </div>
</template>
<script>
  import {mapGetters} from "vuex";

  export default {
    data() {
      return {
        ifAgree:{
          result: ""
        },
        upload: false, // 是否显示上传组件
        approval: true, //是否显示审批
        collectList: []
      };
    },
    activated() {
      // 获取收藏数据
      this.$axios
              .post("/api/product/getResource", {
                user_id: this.$store.getters.getUser.user_id
              })
              .then(res => {
                if (res.data.code === "001") {
                  this.collectList = res.data.collectList;
                }
              })
              .catch(err => {
                return Promise.reject(err);
              });

    },
    methods: {
      isUpload(val) {
        this.upload = val;
      },
      //向后端发起删除购物车的数据库信息请求
      deleteItem(e, id, productID) {
        this.$axios
                .post("/api/product/deleteResource", {
                  user_id: this.$store.getters.getUser.user_id,
                  product_id: productID
                })
                .then(res => {
                  switch (res.data.code) {
                    case "001":
                      // “001” 删除成功
                      // 提示删除成功信息
                      this.notifySucceed("删除资源成功");
                      break;
                    default:
                      // 提示删除失败信息
                      this.notifyError("删除资源失败");
                  }
                })
                .catch(err => {
                  return Promise.reject(err);
                });
      },

      //向后端提交状态更改
      submitResults(e,id,value,productID){
        this.$axios
                .post("/api/user/order/approval", {
                  state: value,
                  product_id: productID
                })
                .then(res => {
                  switch (res.data.code) {
                    case "001":
                      this.notifySucceed("审批成功");
                      break;
                    default:
                      this.notifyError("审批失败");
                  }
                })
                .catch(err => {
                  return Promise.reject(err);
                });
      }
      /*
      check(productID){
        //获取订单数据
        this.$axios
                .post("/api/user/order/checkOrders", {
                  productID: productID
                })
                .then(res => {
                  if (res.data.code === "001") {
                    this.orders = res.data.orders;
                    console.log("orders.length")
                  }
                })
                .catch(err => {
                  return Promise.reject(err);
                });
      }*/

    },
    computed:{
      ...mapGetters([
        "getShoppingCart",
      ]),
    }
  };
</script>
<style>
  .collect {
    background-color: #f5f5f5;
    padding-bottom: 20px;
  }
  .collect .collect-header {
    height: 64px;
    background-color: #fff;
    border-bottom: 2px solid #ff6700;
    margin-bottom: 20px;
  }
  .collect .collect-header .collect-title {
    width: 1225px;
    margin: 0 auto;
    height: 64px;
    line-height: 58px;
    font-size: 28px;
  }
  .collect .collect-header p {
    font-size: 28px;
    line-height: 58px;
    float: left;
    font-weight: normal;
    color: #424242;
  }
  .collect .collect-header span {
    color: #757575;
    font-size: 12px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-top: 30px;
    margin-left: 15px;
  }
  .collect .collect-header .r_upload{
    float: right;
    height: 20px;
    line-height: 20px;
    margin-top: -10px;
    margin-right: 15px;
  }
  .collect .content {
    width: 1225px;
    margin: 0 auto;
    background-color: #fff;
  }

  .collect .content ul {
    background-color: #fff;
    color: #424242;
    line-height: 85px;
  }
  /* 资源表头及CSS */
  .collect .content ul .header {
    height: 85px;
    padding-right: 26px;
    color: #424242;
  }
  .collect .content ul .product-list {
    height: 85px;
    padding: 15px 26px 15px 0;
    border-top: 1px solid #e0e0e0;
  }
  .collect .content ul .pro-kind {
    float: left;
    height: 85px;
    width: 110px;
    margin-left: 30px;

  }
  .collect .content ul .pro-img {
    float: left;
    height: 85px;
    width: 120px;
  }
  .collect .content ul .pro-img img {
    height: 80px;
    width: 80px;
  }
  .collect .content ul .pro-name {
    float: left;
    width: 300px;
  }
  .collect .content ul .pro-name a {
    color: #424242;
  }
  .collect .content ul .pro-name a:hover {
    color: #ff6700;
  }
  .collect .content ul .pro-price {
    float: left;
    width: 140px;
    padding-right: 18px;
    text-align: center;
  }
  .collect .content ul .pro-num {
    float: left;
    width: 150px;
    text-align: center;
  }
  .collect .content ul .pro-approval {
    float: left;
    width: 120px;
    padding-right: 50px;
    text-align: center;
  }
  .collect .content ul .pro-action {
    float: left;
    width: 80px;
    text-align: center;
  }
  .collect .content ul .pro-action i:hover {
    color: #ff6700;
  }
  /* 资源表头及CSS END */

  /* 资源列表为空的时候显示的内容CSS */
  .collect .collect-empty {
    width: 1225px;
    margin: 0 auto;
  }
  .collect .collect-empty .empty {
    height: 300px;
    padding: 0 0 130px 558px;
    margin: 65px 0 0;
    background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;
    color: #b0b0b0;
    overflow: hidden;
  }
  .collect .collect-empty .empty h2 {
    margin: 70px 0 15px;
    font-size: 36px;
  }
  .collect .collect-empty .empty p {
    margin: 0 0 20px;
    font-size: 20px;
  }
  /* 资源列表为空的时候显示的内容CSS END */
</style>